import { createStore } from 'vuex';
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';

const localeMap = {
    enUS: {
        name: 'enUS',
        lib: enUS
    },
    zhCN: {
        name: 'zhCN',
        lib: zhCN
    }
};

const fortuneSetting = {
    sideMenuWidth: 200,
    monitorSpan: 12,
    autoLink: false,
    useLocalData: true
};

const defaultFortuneConfig = {
    ip: '127.0.0.1',
    port: 9527
};

const db = createStore({
    state () {
        return {
            locale: localeMap.zhCN.name,
            fortuneConfig: defaultFortuneConfig,
            fortuneSetting: fortuneSetting,
        }
    },
    mutations: {
        localeZhCN () {
            console.log("to " + localeMap.zhCN.name);
            this.state.locale = localeMap.zhCN.name;
        },
        localeEnUS () {
            console.log("to " + localeMap.enUS.name);
            this.state.locale = localeMap.enUS.name;
        },
        updateFortuneConfig (state, {ip, port}) {
            // 更新ip和端口，如果未指定则使用默认ip和端口
            state.fortuneConfig.ip = ip ? ip : defaultFortuneConfig.ip;
            state.fortuneConfig.port = port ? port : defaultFortuneConfig.port;
        },
        changeSideMenuWidth (state, width) {
            state.fortuneSetting.sideMenuWidth = width;
        },
        changeMonitorSpan (state, span) {
            state.fortuneSetting.monitorSpan = span;
        },
        changeAutoLink (state, isAuto) {
            state.fortuneSetting.autoLink = isAuto;
        },
        switchDataChannel (state, useLocal) {
            state.fortuneSetting.useLocalData = useLocal;
        }
    },
    getters: {
        locale: state => {
            return localeMap[state.locale].lib;
        },
        fortuneConfig: state => {
            return state.fortuneConfig;
        },
        fortuneUrl: state => {
            return `ws://${state.fortuneConfig.ip}:${state.fortuneConfig.port}/`;
        },
        sideMenuWidth: state => {
            return state.fortuneSetting.sideMenuWidth;
        },
        monitorSpan: state => {
            return state.fortuneSetting.monitorSpan;
        },
        autoLink: state => {
            return state.fortuneSetting.autoLink;
        },
        useLocalData: state => {
            return state.fortuneSetting.useLocalData;
        }
    }
});

export default db;
